<template>
  <div>
    用户名：<input type="text" v-model="user_name" /><br />
    密码：<input type="text" v-model="password" /><br />
    <button @click="register">注册</button><br />
    <form action="http://localhost:8001/register" method="post">
      用户名：<input type="text" name="user_name" /><br />
      密码：<input type="text" name="password" /><br />
      <input type="submit" value="提交" />
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user_name: "",
      password: "",
    };
  },
  methods: {
    register() {
      // 收集用户名和密码
      const user = {
        user_name: this.user_name,
        password: this.password,
      };
      console.log(user);
      // 收集到用户名和密码之后需要发送服务器
      // 表单的格式 application/x-www-form-urlencoded
      // {user_name:'xx',password:'xxx'}转变表单数据的格式  key=value&key=value
      this.$http
        .post("http://localhost:8001/register", user, {
          emulateJSON: true,
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>